<template>
	<view class="index">
		<mucishead title="网抑云音乐" :icon="false"></mucishead>
		<view class="container">
			<scroll-view scroll-y="true" >
				<!-- 搜索框 -->
				<view class="index-father">
					<view class="index-seach" @tap="handTosearch">
						<text class="iconfont icon-search"></text>
						<input type="text" placeholder="搜索歌曲" />
					</view>
					<view class="index-login" @click="handToadmin">
						登录
					</view>
				</view>
				
				
				<view v-if="isLoading">
					 <skeleton 
					   :loading="isLoading" 
					   :imgTitle="true">
					 </skeleton>
				</view>
				 
				<!-- banner图 -->
				<swiper class="index-banner banner-comment" 
				indicator-dots="true" 
				indicator-color="rgba(0,0,0,0.4)"
				indicator-active-color="#fff"
				autoplay="true"
				circular
				v-else>
					<swiper-item class="index-banner-img" v-for="(item,index) in banner" :key="index" @tap="handelToDetail(item.targetId)">
						<image :src="item.imageUrl" mode=""></image>
					</swiper-item>
				</swiper>
				
				<!-- 分类区域 -->
				<view class="index-category" >
					<view class="index-category-list">
						<view class="category1">
							<svg class="icon" aria-hidden="true">
							    <use xlink:href="#icon-faxian_meirituijian"></use>
							</svg>
							<text>每日推荐</text>
						</view>
							<view class="category2">
								<svg class="icon" aria-hidden="true">
								   <use xlink:href="#icon-faxian_sirenFM"></use>
								</svg>
								<text>私人FM</text>
							</view>
							
							<view class="category3" @click="handTosongsquare">
								<svg class="icon" aria-hidden="true">
								   <use xlink:href="#icon-faxian_gedan"></use>
								</svg>
								<text>歌单</text>
							</view>
							
							<view class="category4"  @click="handTodetails">
								<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-faxian_paihangbang"></use>
								</svg>
								<text>排行榜</text>
							</view>
					</view>
				</view>
			    <!-- 推荐歌单 -->
				<view class="index-recommend">
					<!-- 推荐歌单头部 -->
					<view class="index-recommend-heade comment_margin">
						<view class="index-recommend-text">推荐歌单</view>
						<view class="index-recommend-next" @tap="handTosongsquare">
							<text>更多</text><text class="iconfont icon-next"></text>
						</view>
					</view>
					
					<!-- 推荐歌单列表 -->
					<view class="song_image_recommend">
						<scroll-view scroll-x="true" show-scrollbar="false">
							<view class="index-recommend-song comment_margin ">
								<view class="song_image" v-for="(item,index) in personalized " :key="index" @tap="handTolist(item.id)">
									<image :src="item.picUrl" mode=""></image>
									<view>{{item.name}}</view>
								</view>				
							</view>
						</scroll-view>
					</view>
				</view>
			
				<!-- 排行榜 -->
				<view class="index-list comment_margin" >
					<!-- 排行榜头部 -->
					<view class="index-recommend-heade index-list-heade">
						<view class="index-recommend-text">排行榜</view>
						<view class="index-recommend-next"  @click="handTodetails">
							<text>更多</text><text class="iconfont icon-next"></text>
						</view>
					</view>
					<!-- 表单列表页 -->
					<!-- <view class="index-list-item">
						
						<view class="index-list-img">
							<image src="../../static/images/list.jpg" mode=""></image>
							<text>每日更新</text>
						</view>
						
						<view class="index-list-text">
							<view >	1、与我无关-阿冗</view>
							<view >	1、与我无关-阿冗</view>
							<view >	1、与我无关-阿冗</view>
						</view>
					</view> -->
					<view class="index-list-item" v-for="(item,index) in topList" :key="index" @click="handTolist(item.id)">
						<!-- 左侧图片区域 -->
						<view class="index-list-img">
							<image :src="item.coverImgUrl" mode=""></image>
							<text>{{item.updateFrequency}}</text>
						</view>
						<!-- 右侧文案区域 -->
						<view class="index-list-text" >
							<view  class="list-text" v-for="(item,index) in item.tracks" :key="index">{{index +1}}.{{item.first}}-{{item.second}}</view>
						</view>
					</view>
					
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import '../../common/iconfont.css'
	import mucishead from '../../components/mucishead/mucishead.vue'
	import { toplist,personalized,banner,topic} from '../../common/api.js'
	import Skeleton from '../../components/J-skeleton/J-skeleton.vue'
	export default {
		data() {
			return {
				topList:[],
				isLoading:true,
				personalized:[],
				banner:[],
				topic:[],
			}
		},
		components:{
			mucishead,
			Skeleton
		},
		onLoad(options) {
		toplist().then((res)=>{
			if(res.length){
				setTimeout(()=>{
					this.topList = res;
					this.isLoading = false;
				},1000)
			}
		}),
		// 加载推荐歌单数据
		personalized().then((res)=>{
			this.personalized = res[1].data.result;
		}),
		
		//加载banner图
		banner().then((res)=>{
			this.banner = res[1].data.banners;
				
		})
		
		//加载热门话题
		topic().then((res)=>{
				console.log(res)
			})
		},
		methods: {
			//轮播图跳转到播放页面
			handelToDetail(songId){
				uni.navigateTo({
					url:'/pages/detail/detail?songId=' + songId
				})
				// console.log(id)
			},
			// 跳转至歌单列表页
			handTolist:function(listId){
				uni.navigateTo({
					url:'/pages/list/list?listId=' + listId
				})
			},
			// 跳转至排行榜列表页
			handTodetails:function(){
				uni.navigateTo({
					url:'/pages/details/details'
				})
			},
			handTosongsquare:function(){
				uni.navigateTo({
					url:'/pages/songsquare/songsquare'
				})
			},
			// 跳转至搜索页面
			handTosearch:function(){
				uni.navigateTo({
					url:'/pages/search/search'
				});
			},
			//跳转登录
			handToadmin:function(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style scoped>
	svg.icon {
	    width: 100%;
	    height: 50px;
		}
	.comment_margin{
		margin:0 30rpx;
	}
	.index{}
	.index-father{
		position: relative;
	}
	.index-seach{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 30rpx 120rpx 30rpx 30rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
	}
	.index-login{
		position: absolute;
		right:30rpx;
		top:14rpx
	}
	.index-seach text{
		font-size: 26px;
		margin-right: 26rpx;
		margin-left: 28rpx;
	}
	.index-seach input{
		font-size: 28rpx;
		flex: 1;
	}
	.index-banner{
		display: flex;
		align-items: center;
		/* width: 685rpx;
		height:260rpx; */
	}
	.banner-comment{
		margin: 0 30rpx;
		overflow: hidden;
	}
	.index-banner-img{
		width: 680rpx;
		height: 260rpx;
		background-size: 100%;
		border-radius: 40rpx;
		overflow: hidden;
	}
	.index-banner-img image{
		width: 100%;
		height: 100%;
	}
	.index-category{
		width: 100%;
		height: 200rpx;
		border-bottom: #efefef 1px solid;
	
	}
	.index-category-list{
		display: flex;
		align-items: center;
		/* width: 680rpx; */
		height: 160rpx;
		margin:30rpx 30rpx 30rpx 30rpx;
		
	}
	.category1,.category2,.category3,.category4{
		 vertical-align:middle;
		 text-align: center;
		 font-size: 28rpx;
	}
	
	.index-recommend{
		width: 100%;
		height: 420rpx; 
		padding-top: 40rpx;
	}
	.index-recommend-heade{
		height: 50px;
		display: flex;
		justify-content:space-between;
		text-align: center;
	}
	.index-list-heade{
		margin-bottom: 20rpx;
	}
	.index-recommend-text,.index-recommend-next{
		height: 48rpx;
		line-height: 48rpx;
		font-size: 32rpx;
		font-weight: 900;
	}
	.index-recommend-text{
		width: 200rpx;
	}
	.index-recommend-next {
		width: 150rpx;
		border: #ececec 1px solid;
		border-radius: 50px;
	}
	
	.index-recommend-song{
		height: 320rpx;
		display: flex;
		align-items: center;
	}
	.index-recommend-song image{
		width: 200rpx;
		height:200rpx;
		border-radius: 30rpx;
	} 
	.song_image_recommend{
		overflow: hidden;
		/* white-space:nowrap; */
	}
	scroll-view {
		width:100%;
		overflow-x:auto;
	}
	.song_image{
		margin-left: 10rpx;
		margin-right: 10rpx;
		vertical-align:middle;
		text-align: center;
		font-size: 28rpx;
	}
	.song_image view{
		overflow: hidden;
		width:200rpx;
		height: 76rpx;
	}
	
	.index-list{
		margin-top: 20rpx;
	}
	.index-list-item{
		display: flex;
		margin-bottom: 34rpx;
	}
	.index-list-img{
		width: 212rpx;
		height: 212rpx;
		position: relative;
		border-radius: 30rpx;
		overflow: hidden;
		margin-right: 22rpx;
	}
	.index-list-img image{
		width: 100%;
		height: 100%;
	}
	.index-list-img text{
		position: absolute;
		left: 12rpx;
		bottom: 16rpx;
		color: #fff;
		font-size: 28rpx;
	}
	.index-list-text{
		width: 400rpx;
		font-size: 28rpx;
		line-height: 66rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		}
	
</style>
